<html>
    <head>
        <title>插槽的循环渲染</title>
    </head>
    <body>
        <script>
            // 在组件中循环渲染插槽内容
                        /*
                            ★、 插槽属性(prop)允许我们"将插槽转换为可复用的模板",这些模板可以"基于输入的插槽属性(prop)的值"渲染出不同的内容。


                                这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组价时是最有用的。
                        */

                            // 例如,我们要实现一个<todo-list> 组件，它是一个列表且包含布局和过滤逻辑：
                                        /*
                                            <ul>
                                                <li 
                                                    v-for="todo in filteredTodos"
                                                    v-bind:key="todo.id"
                                                >
                                                    {{todo.text}}
                                                </li>
                                            </ul>
                                        */
                            /*
                                我们可以将每个todo作为父级组件的插槽,以此通过腹肌组件对其进行控制，然后将todo对象作为一个插槽属性进行绑定：

                                       <ul>
                                            <li 
                                                v-for='todo in filteredTodos'
                                                v-bind:key="todo.id"
                                            >
                                                // 我们为每个todo 项目准备了一个具名插槽，并将 todo(待办项目对象)作为插槽属性传入插槽。
                                                <slot name="todo" v-bind:todo="todo">
                                                    ---后备内容---
                                                    {{ todo.text}}
                                                </slot>
                                            </li>
                                       </ul>
                            */ 

                            /*
                                现在当我们使用<todo-list>组件的时候，我们可以选择为todo 定义不一样的<template> 作为替代方案，并且可以从子组件获取数据：
                            */
                                      /*
                                          <todo-list v-bind:todos="todos">
                                                <template #todo="todo">
                                                    <span v-if="todo.isComplete">✓</span>
                                                    {{ todo.text}}
                                                </template>
                                          </todo-list>
                                      */

                    /*
                        ★、这只是作用域操作用武之地的冰山一角。
                            想了解更多现实生活中的作用域插槽的用法，我们推荐浏览住处 Vue Virtual Scroller、Vue Promised 和 Portal Vue 等库。
                    */
                                        
        </script>
    </body>
</html>